<template>
	<dt-main-body v-model="labelPosition">
		<div class="location">
			<el-breadcrumb separator-class="el-icon-arrow-right">
				<el-breadcrumb-item>
					<i class="iconfont icon-home"></i>
					管理中心
				</el-breadcrumb-item>
				<el-breadcrumb-item>订单管理</el-breadcrumb-item>
				<el-breadcrumb-item>编辑发货</el-breadcrumb-item>
			</el-breadcrumb>
		</div>

		<div class="content-box">
			<el-tabs v-model="activeName" type="card">
				<el-tab-pane label="基本信息" name="info">
					<div class="tab-content">
						<el-form ref="editForm" :model="model" :rules="rules" :label-position="labelPosition" label-width="120px">
							<el-form-item prop="orderId" label="搜索订单">
								<el-select v-model="orderSelected" clearable filterable remote reserve-keyword
									value-key="id"
									placeholder="输入订单号关健字"
									:remote-method="remoteMethod"
									:loading="orderLoading"
									@change="handleOrderChange" style="width:100%;">
									<el-option v-for="item in orderOptions" :key="item.id"
										:label="item.orderNo"
										:value="item">
									</el-option>
								</el-select>
							</el-form-item>
							<el-form-item label="订单状态" v-if="orderSelected.status">
								<span v-if="orderSelected.refundStatus==1">全部退款</span>
								<span v-else-if="orderSelected.refundStatus==2">部分退款</span>
								<span v-else-if="orderSelected.status==1">等待付款</span>
								<span v-else-if="orderSelected.status==2">等待发货</span>
								<span v-else-if="orderSelected.status==3">等待收货</span>
								<span v-else-if="orderSelected.status==4">订单签收</span>
								<span v-else-if="orderSelected.status==5">订单完成</span>
								<span v-else-if="orderSelected.status==6">订单取消</span>
								<span v-else-if="orderSelected.status==7">订单作废</span>
							</el-form-item>
							<el-form-item label="商品列表" v-if="orderSelected.orderGoods">
								<el-table ref="goodsTable" :data="orderSelected.orderGoods" border @selection-change="handleSelectionChange" class="table-form">
									<el-table-column type="selection" :selectable="checkSelecGoods" width="45" align="center"></el-table-column>
									<el-table-column label="商品名称" min-width="220">
										<template slot-scope="scope">
											<el-image class="pic" fit="contain" :src="$api.loadFile(scope.row.imgUrl)">
												<div slot="error" class="image-slot">
													<i class="el-icon-picture-outline"></i>
												</div>
											</el-image>
											<h4>{{scope.row.goodsTitle}}</h4>
											<span class="date">
												{{scope.row.goodsNo}}
											</span>
										</template>
									</el-table-column>
									<el-table-column prop="specText" label="规格" min-width="120" show-overflow-tooltip></el-table-column>
									<el-table-column prop="realPrice" label="单价" width="80"></el-table-column>
									<el-table-column prop="quantity" label="数量" width="80"></el-table-column>
									<el-table-column label="状态" width="80" align="center">
										<template slot-scope="scope">
											<el-tag size="small" type="success" effect="dark" v-if="scope.row.deliveryStatus==1">已发货</el-tag>
											<el-tag size="small" type="info" effect="dark" v-else-if="scope.row.deliveryStatus==2">已退货</el-tag>
											<el-tag size="small" type="danger" effect="dark" v-else>待发货</el-tag>
										</template>
									</el-table-column>
								</el-table>
							</el-form-item>
							<el-form-item prop="acceptName" label="收 件 人">
								<el-input v-model="model.acceptName" placeholder="必填，收货人的姓名"></el-input>
							</el-form-item>
							<el-form-item prop="mobile" label="手机号码">
								<el-input v-model="model.mobile" placeholder="必填，收货人的手机号码"></el-input>
							</el-form-item>
							<el-form-item prop="telPhone" label="固定电话">
								<el-input v-model="model.telPhone" placeholder="可空，收货人固定电话号码"></el-input>
							</el-form-item>
							<el-form-item label="收货地区">
								<el-row class="select-list">
									<el-col :xs="24" :sm="8">
										<el-form-item prop="province">
											<el-select v-model="model.province" @change="handleProvinceChange" placeholder="请选择省份">
												<el-option v-for="item in provinceList"
													:key="item.id"
													:label="item.title"
													:value="item.title">
												</el-option>
											</el-select>
										</el-form-item>
									</el-col>
									<el-col :xs="24" :sm="8">
										<el-form-item prop="city">
											<el-select v-model="model.city" @change="handleCityChange" placeholder="请选择城市">
												<el-option v-for="item in cityList"
													:key="item.id"
													:label="item.title"
													:value="item.title">
												</el-option>
											</el-select>
										</el-form-item>
									</el-col>
									<el-col :xs="24" :sm="8">
										<el-form-item prop="area">
											<el-select v-model="model.area" placeholder="请选择地区">
												<el-option v-for="item in areaList"
													:key="item.id"
													:label="item.title"
													:value="item.title">
												</el-option>
											</el-select>
										</el-form-item>
									</el-col>
								</el-row>
							</el-form-item>
							<el-form-item prop="address" label="详细地区">
								<el-input v-model="model.address" placeholder="必填，除省市区外的详细地区"></el-input>
							</el-form-item>
							<el-form-item prop="expressId" label="物流公司">
								<el-select v-model="model.expressId" placeholder="请选择...">
									<el-option v-for="item in expressList"
										:key="item.id"
										:label="item.title"
										:value="item.id">
									</el-option>
								</el-select>
							</el-form-item>
							<el-form-item prop="expressCode" label="物流单号">
								<el-input v-model="model.expressCode" placeholder="必填，物流快递的单号"></el-input>
							</el-form-item>
							<el-form-item prop="freight" label="配送运费">
								<el-input v-model="model.freight" placeholder="必填，本次配送运费">
									<template slot="prepend">
										￥
									</template>
									<template slot="append">
										元
									</template>
								</el-input>
							</el-form-item>
							<el-form-item prop="remark" label="单据备注">
								<el-input type="textarea" :rows="3" v-model="model.remark" maxlength="512" show-word-limit placeholder="可空，发货单备注说明"></el-input>
							</el-form-item>
						</el-form>
					</div>
				</el-tab-pane>
			</el-tabs>
		</div>
		
		<div class="footer-box">
			<div class="footer-btn">
				<el-button type="primary" :loading="loading" @click="submitForm">确认保存</el-button>
				<el-button plain @click="$common.back()">返回上一页</el-button>
			</div>
		</div>
	</dt-main-body>
</template>

<script>
	export default {
		props: {
			id: 0
		},
		data() {
			return {
				activeName: 'info', //当前选项卡
				labelPosition: 'right', //表单对齐方式
				loading: false,//加载效果
				orderLoading: false,//订单加载效果
				orderOptions: [],//订单查询列表
				orderSelected: [],//订单对象
				expressList:[],//物流公司
				provinceList: [],//省份列表
				cityList: [],//城市列表
				areaList: [],//地区列表
				model: {
					id: 0,
					orderId: null,
					orderNo: null,
					acceptName: null,
					telPhone: null,
					mobile: null,
					province: null,
					city: null,
					area: null,
					address: null,
					freight: null,
					expressId: null,
					expressCode: null,
					remark: null,
					addTime: null,
					deliveryGoods: []
				},
				rules: {
					orderId: [
						{ required: true, message: '请输入订单号', trigger: 'change' }
					],
					acceptName: [
						{ required: true, message: '请输入收货人姓名', trigger: 'blur' }
					],
					mobile: [
						{ required: true, message: '请输入收货人手机号码', trigger: 'blur' },
						{ pattern: /^1[0-9]{10}$/, message: '手机号码格式不正确', trigger: 'blur' }
					],
					province: [
						{ required: true, message: '请选择配送省份', trigger: 'change' }
					],
					city: [
						{ required: true, message: '请选择配送城区', trigger: 'change' }
					],
					area: [
						{ required: true, message: '请选择配送地区', trigger: 'change' }
					],
					address: [
						{ required: true, message: '请输入除省市区外收货地址', trigger: 'blur' }
					],
					freight: [
						{ required: true, message: '请输入本次配送物流的费用', trigger: 'blur' },
						{ pattern: /^(([0-9]|([1-9][0-9]{0,9}))((\.[0-9]{1,2})?))$/, message: '请输入正确金额，可保留两位小数', trigger: 'blur' }
					],
					expressId: [
						{ required: true, message: '请选择物流公司', trigger: 'change' }
					],
					expressCode: [
						{ required: true, message: '请输入物流单号', trigger: 'change' }
					],
				}
			}
		},
		methods: {
			//初始化控件
			initLoad() {
				let _this = this;
				//加载省份列表
				_this.$api.request({
					url: '/admin/area/view/0',
					success(res) {
						_this.provinceList = res.data;
					}
				});
				//加载物流公司列表
				_this.$api.request({
					url: '/admin/shop/express/view/0',
					success(res) {
						_this.expressList = res.data;
					}
				});
			},
			//提交订单
			submitForm() {
				let _this = this; //当前页面
				//多个表单验证
				const f1 = new Promise((resolve, reject) => {
					_this.$refs['editForm'].validate((valid) => {
						if (valid) resolve()
					});
				});
				Promise.all([f1]).then(() => {
					//检查是否选择商品
					if (_this.model.deliveryGoods.length == 0) {
						_this.$message({ type: 'warning', message: '温馨提示，请选择商品再提交' });
						return false;
					}
					//提交表单
					_this.$api.request({
						method: 'post',
						url: '/admin/order/delivery',
						data: _this.model,
						successMsg: '订单发货已成功',
						beforeSend() {
							_this.loading = true
						},
						success(res) {
							_this.$common.linkUrl('/order/delivery/list');
						},
						complete() {
							_this.loading = false
						}
					});
				})
			},
			//省份回调事件
			handleProvinceChange(val, city) {
				let _this = this;
				//加载城市列表
				_this.$api.request({
					url: '/admin/area/view/0?keyword=' + encodeURI(val),
					success(res) {
						_this.cityList = res.data;
					},
					error(err) {
						_this.cityList = [];
					},
					complete() {
						if (!city) {
							_this.model.city = null;
							_this.model.area = null;
							_this.areaList = [];
						}
					}
				});
			},
			//城市回调事件
			handleCityChange(val, area) {
				let _this = this;
				//加载城市列表
				_this.$api.request({
					url: '/admin/area/view/0?keyword=' + encodeURI(val),
					success(res) {
						_this.areaList = res.data;
					},
					error(err) {
						_this.areaList = []
					},
					complete() {
						if (!area) {
							_this.model.area = null;
						}
					}
				});
			},
			//订单号搜索回调
			remoteMethod(query) {
				let _this = this;//当前页面
				if (query !== '') {
					let sendUrl = "/admin/order/view/5?status=2&keyword=" + encodeURI(query);
					_this.$api.request({
						url: sendUrl,
						beforeSend() {
							_this.orderLoading = true
						},
						success(res) {
							_this.orderOptions = res.data;
						},
						error(err) {
							_this.orderOptions = []
						},
						complete() {
							_this.orderLoading = false
						}
					});
				} else {
					this.orderOptions = [];
				}
			},
			//选中订单号回调
			handleOrderChange(val) {
				let _this = this;
				_this.model.orderId = val.id;
				_this.model.orderNo = val.orderNo;
				_this.model.acceptName = val.acceptName;
				_this.model.telPhone = val.telPhone;
				_this.model.mobile = val.mobile;
				_this.model.province = val.province;
				_this.model.city = val.city;
				_this.model.area = val.area;
				if (val.province) {
					_this.handleProvinceChange(_this.model.province, _this.model.city)
				}
				if (val.cityId) {
					_this.handleCityChange(_this.model.city, _this.model.area)
				}
				if (val.address) {
					let addressArr = val.address.split(",");
					_this.model.address = addressArr[addressArr.length - 1];
				}
				_this.model.freight = val.realFreight;
				_this.model.deliveryGoods = [];
			},
			//设置不可选中的商品
			checkSelecGoods(row) {
				return row.deliveryStatus == 0;
			},
			//选中第几行商品
			handleSelectionChange(val) {
				let _this = this;
				_this.model.deliveryGoods = [];
				val.map((item, index) => {
					_this.model.deliveryGoods.push({
						id: 0,
						deliveryId: 0,
						orderGoodsId: item.id
					});
				});
			},
		},
		created() {
			this.initLoad();
		}
	}
</script>